<template>
  <p>Vuex</p>
  <p>count:{{ this.$store.state.count }}</p>
  <p>count:{{ count }}</p>
  <p>countAlias:{{ countAlias }}</p>
  <p>Getters ===============</p>
  <p>countAddFive:{{ this.$store.getters.countAddFive }}</p>
  <p>countAddFive:{{ countAddFive }}</p>
  <p>countAddFiveAddTen:{{ countAddFiveAddTen }}</p>
  <p>countAddFiveAlias:{{ countAddFiveAlias }}</p>
  <p>Mutations ===============</p>
  <button @click="addMut">addMut</button>
  <button @click="addPlayloadMut">addPlayloadMut</button>
  <button @click="add">add</button>
  <button @click="addCommit">addCommit</button>
  <button @click="addAlias">addAlias</button>

  <p>Actions ===============</p>
  <button @click="addActionMut">addActionMut</button>
  <button @click="asyncAddActionMut">asyncAddActionMut</button>
  <button @click="asyncAddPlayloadActionMut">asyncAddPlayloadActionMut</button>
  <button @click="addAction">addAction</button>
  <button @click="addActionDispatch">addActionDispatch</button>
  <button @click="addActionAlias">addActionAlias</button>


  <h1>命名空间</h1>
  <p>无命名空间</p>
  <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
  <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>
  <p>有命名空间</p>
  <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
  <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p>

  <h1>Vuex module</h1>
  <button @click="commitIncreaseA">触发-moduleA-muations</button>
  <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
  <button @click="commitIncreaseB">触发-moduleB-muations</button>
  <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

  <h1>MapXXX方法</h1>
  <h2>全局</h2>
  <p>states</p>
  <p>countA: {{ countA }}</p>
  <p>getters</p>
  <p>countAA: {{ countAA }}</p>
  <p>mutations</p>
  <button @click="increaseA">触发increaseA</button>
  <p>actions</p>
  <button @click="asyncIncreaseA">触发asyncIncreaseA</button>

  <h2>局部</h2>
  <p>moduleB state</p>
  <p>countB: {{ countB }}</p>

  <p>moduleB mutations</p>
  <button @click="emitIncreaseB">触发increaseB</button>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
export default {
  computed: {
    // count(){
    //   return this.$store.state.count
    // }
    // // 数组形式
    // ...mapState(['count']),
    // 对象形式
    ...mapState({
      // count: state => state.count,
      count: 'count',
      countAlias: state => state.count,
    }),
    // countAddFive(){
    //   return this.$store.getters.countAddFive
    // },
    // countAddFiveAddTen(){
    //   return this.$store.getters.countAddFiveAddTen
    // },
    // // 数组形式
    // ...mapGetters(['countAddFive','countAddFiveAddTen'])
    ...mapGetters({
      countAddFive: 'countAddFive',
      countAddFiveAddTen: 'countAddFiveAddTen',
      countAddFiveAlias: 'countAddFiveAddTen',

    }),

    // 映射全局getter
    ...mapGetters(['countAA']),
    // 映射模块A的countA
    ...mapState({
      countA: state => state.a.countA
    }),

    // 映射局部
    ...mapState('b', ['countB']),
  },
  methods: {
    addMut() {
      this.$store.commit('add')
    },
    addPlayloadMut() {
      // this.$store.commit('addPlayload',{num:10})
      this.$store.commit({
        type: 'addPlayload',
        num: 10
      })
    },
    // ...mapMutations(['add','addPlayload']),
    addCommit() {
      this.addPlayload({ num: 20 })
    },
    ...mapMutations({
      add: 'add',
      addAlias: 'add'
    }),

    addActionMut() {
      this.$store.dispatch('addAction')
    },
    asyncAddActionMut() {
      this.$store.dispatch('asyncAddAction')
    },
    asyncAddPlayloadActionMut() {
      this.$store.dispatch('asyncAddPloyloadAction', { num: 20 })
    },
    // ...mapActions(['addAction', 'asyncAddPloyloadAction']),
    addActionDispatch() {
      this.asyncAddPloyloadAction({ num: 30 })
    },
    ...mapActions({
      addAction: 'addAction',
      addActionAlias: 'addAction'
    }),
    commitIncreaseA() {
      this.$store.commit('increaseA')
    },
    commitAsyncIncreaseA() {
      this.$store.dispatch('asyncIncreaseA')
    },
    commitIncreaseB() {
      this.$store.commit('b/increaseB')
    },
    commitAsyncIncreaseB() {
      this.$store.dispatch('b/asyncIncreaseB')
    },

    // 映射全局mutations
    ...mapMutations(['increaseA']),
    // 映射全局actions
    ...mapActions(['asyncIncreaseA']),

    // 映射局部
    ...mapMutations('b', ['increaseB']),
    emitIncreaseB() {
      this.increaseB()
    },

  },
  mounted() {
    console.log(this.$store);
  }
}
</script>